import ArrowImg from "@/assets/images/public/arrow-down.png";
import { NImage, NRequireLabel } from "@/components/Uikit";
import { type SelectProps, Select } from "@mantine/core";
import classNames from "classnames";
import React, { useState } from "react";
import { mergeClassNames } from "../tools";
import styles from "./Select.module.less";

export const NSelect = React.memo(
  ({ className, required, withAsterisk, label, ...restProps }: SelectProps) => {
    const [dropDownOpened, setDropDownOpened] = useState(false);
    {
      return (
        <>
          {label ? (
            <NRequireLabel required={required} withAsterisk={withAsterisk} label={label} />
          ) : (
            ""
          )}
          <Select
            className={classNames(
              `${dropDownOpened ? styles["dropdown-on"] : styles["dropdown-off"]}`,
              className,
            )}
            classNames={mergeClassNames(styles, restProps.classNames)}
            withCheckIcon={false}
            allowDeselect={false}
            onDropdownOpen={() => {
              setDropDownOpened(true);
              restProps.onDropdownOpen?.();
            }}
            onDropdownClose={() => {
              setDropDownOpened(false);
              restProps.onDropdownClose?.();
            }}
            comboboxProps={{
              transitionProps: { transition: "pop", duration: 300 },
              ...restProps.comboboxProps,
            }}
            rightSection={
              <NImage
                className={classNames(
                  "flex-none text-8 mx-10 text-fcw-1",
                  "origin-center transition-transform rotate-0",
                  { "!rotate-180": dropDownOpened },
                )}
                src={ArrowImg}
              />
            }
            {...restProps}
          />
        </>
      );
    }
  },
);
